<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7_4_2-组合式API重命名</title>
</head>

<body>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="Application">

    </div>
    <script>
        let mock = [
            {
                name: "小王",
                sex: 0
            },

            {
                name: "小红",
                sex: 1
            },

            {
                name: "小李",
                sex: 1
            },

            {
                name: "小张",
                sex: 0
            },

            {
                name: "小玉",
                sex: 1
            },
        ]
        const App = Vue.createApp({
            setup() {
                //先处理用户列表相关逻辑

                //const 声明一个只读的常量，一旦声明，常量的值就不能改变。
                const showDatas = Vue.ref([])

                //获取数据方法
                const queryAllData = () => {
                    //模拟请求过程
                    //setTimeout(要执行的代码, 等待的毫秒数)
                    //setTimeout(JavaScript 函数, 等待的毫秒数)
                    //https://www.runoob.com/w3cnote/javascript-settimeout-usage.html
                    setTimeout(() => {
                        showDatas.value = mock
                    }, 3);
                }
                //组件挂载时获取数据
                Vue.onMounted(queryAllData)

                //处理筛选与检索逻辑

                //let 声明的变量只在 let 命令所在的代码块内有效。
                //-1:所有人，0：男性，1：女性

                //查性别
                let sexFilter = Vue.ref(-1)
                //查名字
                let searchKey = Vue.ref("")

                //需要的，重组后的数组
                let fliterData = () => {
                    searchKey.value = ""
                    if (sexFilter.value == -1) {
                        //输出所有人
                        showDatas.value == mock
                    } else {

                        //https://www.runoob.com/jsref/jsref-filter.html
                        //filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

                        //(单一参数) => {函数声明}
                        showDatas.value = mock.filter((data) => {
                            //如果sexFilter.value是1，就返回sex的值为1的数组
                            //如果sexFilter.value是0，就返回sex的值为0的数组
                            return data.sex == sexFilter.value
                        })
                    }
                }

                //查名字
                searchData = () => {
                    sexFilter.value = -1
                    if (searchKey.value.length == 0) {
                        //如果名字为空，就输出所有人
                        showDatas.value = mock
                    } else {
                        showDatas.value = mock.filter((data) => {
                            //search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
                            //如果没有找到任何匹配的子串，则返回 -1。
                            //!= 在表达式两边的数据类型不一致时,会隐式转换为相同数据类型,然后对值进行比较.
                            return data.name.search(searchKey.value) != -1
                        })
                    }
                }
                //添加侦听
                //查性别，查性别后的数组
                Vue.watch(sexFilter, fliterData)

                //查名字，查完名字后的数组
                Vue.watch(searchKey, searchData)
                //将模板中需要使用的数据返回
                return {
                    //所有人
                    showDatas,

                    //查名字
                    searchKey,

                    //查性别
                    sexFilter
                }
            },
            template: `
            <div class="container">
            <div class="content">
                <input type="radio" :value="-1" v-model="sexFilter" />全部
                <input type="radio" :value="0" v-model="sexFilter" />男
                <input type="radio" :value="1" v-model="sexFilter" />女
            </div>
            <div class="content">搜索：<input type="text" v-model="searchKey" /></div>
            <div class="content">
                <table border="1" width="300px">
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                    </tr>
                    <tr v-for="(data,index) in showDatas">
                        <td>{{data.name}}</td>
                        <td>{{data.sex==0?'男':'女'}}</td>
                    </tr>
                </table>
            </div>
        </div>
            `
        })
        App.mount("#Application")
    </script>

    <style>
        .container {
            margin: 50px;
        }

        .content {
            margin: 20px;
        }
    </style>

    <script>

    </script>

</body>

</html>